import './index.scss'
import { microCreateMinis } from '../../minis'
import draggable from 'vuedraggable';

export default {
  name: 'textArea',
  mixins: [microCreateMinis],
  components: {
    chooseVideo: () => import('@/components/new-choose-video/index.vue'),
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    draggable
  },
  data() {
    return {
      formData: {
        isSwitch:false, // 自动播放
        tabsNum:'1',  // tabs切换
        tabActive: 0, // 设置切换
        guide:'1', // 引导按钮
        content:'', // 按钮内容
        progress:'1', // 进度条
        cover:'1', // 封面图
        angle:'0', // 视频角度
        size:'2', // 视频尺寸
        margins:'0', // 页边距
        marginTop:'0', // 上边距
        marginBottom:'0', // 下边距
        srcUrl:'',
        posterImg:'',
        videoName:'',
        // https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4
      },
      dialogTableVisible:false,
      videoObj:{},
      canChooseImagesNum: 1, // 可以添加的图片数量
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun'// 我自己的验证规则函数  比如弹窗之类的
    }
  },
  computed: {
  },
  mounted () {
    document.getElementById('video').pause()
  },
  watch: {
    // 监听事件，表单页面关闭时结束视频播放
    formData: {
      deep:true,
      handler(val){
        let myVideo = document.getElementById('video')    //对应video标签的ID
        if (val.isSwitch === false) {                         //visible为表单显示状态
            myVideo.pause()
        }else{
          myVideo.play()
        }
        if(val.cover === "1"){
          this.formData.posterImg = ''
        }
      }
    }
    
  },
  methods: {
    getPicsUrl(arr) {
      this.formData.posterImg = arr[0]
    },
    chooseImagesEnd($item) {
    },
    changeImg(index) {
      this.$refs.pics.dialog = true
    },
    comfirm() {
      this.formData.srcUrl = this.videoObj.path
      this.formData.videoName = this.videoObj.name
      document.querySelector('video').load();
      this.dialogTableVisible = false
    },
    videoBox(row) {
      this.videoObj = row
    },
    addClick(){
      this.dialogTableVisible = true
    },
    // 重置颜色
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.lineColor = '#D8D8D8'
      } else if (type === 2) {
        this.formData.bgColor = '#FFFFFF'
      }
    },
    /* 校验*/
    checkData() {
      this.myCheckResult((this.formData.srcUrl !== ''))
    },
    // 弹出哪个没有填写的
    mySelfCheckFun() {
      if (this.formData.srcUrl === '') {
        this.$message.error('请添加视频')
      }
    }
  }
}
